<template>
  <div id="LabTMLBDict">
    <Breadcrumb content="视图黑名单" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input type="search" v-model="form.keyvalue" clearable class="vxeInputSearch" @search-click="findList" @clear="findList" @keyup.enter="findList" placeholder="关键字查询"></vxe-input>
              <vxe-button type="text" class="button-blue" @click="findList(2)" icon="vxe-icon-refresh" :loading="loading">刷新</vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="loading" height="auto" :data="tableData" :row-config="{ isCurrent: true }" :column-config="{ resizable: true }" show-overflow keep-source :scroll-y="{ enabled: true }" @current-change="tableCellClick" @menu-click="contextMenuClickEvent">
              <vxe-column type="checkbox" width="26"></vxe-column>
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="name" title="名称" width="120"> </vxe-column>
              <vxe-column field="title" title="标题" width="120"> </vxe-column>
              <vxe-column field="applyName" title="申请人" width="100"> </vxe-column>
              <vxe-column field="applyTime" title="申请时间" width="120"> </vxe-column>
              <vxe-column field="auditName" title="审核人" width="100"> </vxe-column>
              <vxe-column field="auditTime" title="审核时间" width="120"> </vxe-column>
              <vxe-column field="closeName" title="停用人" width="100"> </vxe-column>
              <vxe-column field="closeTime" title="停用时间" width="120"> </vxe-column>
              <vxe-column field="content" title="内容" width="200"> </vxe-column>
              <vxe-column field="remark" title="功能描述" width="200" min-width="150"> </vxe-column>
              <vxe-column title="操作" fixed="right" width="240" align="center">
                <template #default="{ row }">
                  <vxe-button type="text" v-if="row.status==1" status="danger" icon="vxe-icon-picture" content="关闭" @click="handleSwitchChange(row,3)"></vxe-button>
                  <vxe-button type="text" v-if="row.status==3" status="primary" icon="vxe-icon-caret-right" content="开启" @click="handleSwitchChange(row,1)"></vxe-button>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import { AppStore } from '@/stores/store';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();

// 左侧表格:
const loading = ref(false); //刷新+表格加载
const form = reactive({
  keyvalue: '',
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
}); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据

// 方法定义区 =============
onMounted(() => {
  findList(1); //获取样本类型表格数据
});

// 获取 样本类型表格数据
const findList = (flag) => {
  loading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/view/apply/getViewApplyDataSourceList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyword: form.keyvalue, orgId: form.orgId, viewSource: 1, flag } })
    .then(async (res: any) => {
      tableData.push(...res.data);
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取视图列表数据异常', VxeNotifyType.error);
    });
};

function handleSwitchChange(row, flag) {
  let url = '';
  if (flag == 1) {
    url = '/view/apply/openViewApplyDataSourceList';
  } else {
    url = '/view/apply/closeViewApplyDataSourceList';
  }
  proxy.$http
    //注意此处的数据条数
    .post(url, row)
    .then(async (res: any) => {
      if (res && res.status && res.status.code && res.status.code === 1 && res.data) {
        VxeMessage('修改成功', VxeNotifyType.success);
      } else {
        VxeMessage(res.data, VxeNotifyType.error);
      }
      findList(2);
    })
    .catch((err: any) => {
      VxeMessage('接口异常', VxeNotifyType.error);
    });
}
</script>
<style lang="scss" scoped>
#LabTMLBDict {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
